<template>
    <div>
        <h1>学习vue ref</h1>
        <input type="text" ref="demo">
        <button @click="getValue">获取数据</button>
        <div ref="box" class="con"></div>

        <hr>


        <OneRef ref="one"/>
        <button @click="getOne">获取子组件对象</button>
        <hr>

        <TwoRef ref="two"/>
        <button @click="getTwo">获取子组件对象</button> 

        <OneRef/>
        <hr>
        <TwoRef :str="str" :num="num" :bol="bol"/>
        

        <button @click="getOne">点击获取  one 组件对象</button>
        <button @click="getTwo">点击获取  two 组件对象</button>

        <Model></Model>
    
        <EventOne/>
        <EventTwo/>

        <!-- <SlotVue />

        <SlotVue1/> -->

    </div>
</template>

<script>
import OneRef from '@/components/Ref/OneRef';
import TwoRef from '@/components/Ref/TwoRef';
import Model from '@/components/Ref/Model.vue';
import EventOne from '@/components/Ref/Event/EventOne.vue';
import EventTwo from '@/components/Ref/Event/EventTwo.vue';
import SlotVue from '@/components/Slot.vue';
import SlotVue1 from '@/components/SlotVue1.vue';

    export default {
        name:"Ref",
        data(){
            return{
                str:"这是父组件中的数据",
                num:100,
                bol:true
            }
        },
        methods:{
            getValue(){
                // console.log(this.$refs);
                //通过真实dom对象获取数据
                let value = this.$refs.demo.value;
                //展示数据
                this.$refs.box.innerHTML = value;
                //清空数据
                this.$refs.demo.value = "";
            },
            // getOne(){
            //     //获取子组件数据
            //     // console.log(this.$refs.one.str);
            //     //调用子组件方法
            //     this.$refs.one.update("这是父组件修改子组件的数据");
            // },
            // getTwo(){
            //     //获取子组件数据
            //     // console.log(this.$refs.two.str);
            //     //调用子组件方法
            //     this.$refs.two.updateTwo("这是父组件修改子组件的数据");
            // }


            getOne(){

                console.log(this.$children);
                //获取子组件数据
                console.log(this.$children[0].str);
                this.$children[0].update(this.str);
            },
            getTwo(value){
                console.log(this.$children[1].str);
                this.$children[1].updateTwo(value);
            }
        },
        components:{
            OneRef,
            TwoRef,
            Model,
            EventOne,
            EventTwo,
            SlotVue,
            SlotVue1
        },
        
    }
</script>

<style scoped>
.con{
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

button{
    width: 200px;
    height: 60px;
    background: red;
}
</style>